<template>
<el-tooltip v-model="nodeTips" :manual="true" effect="dark" placement="bottom-start">
    <template slot="content">
        <p>节点名称：{{nodeData.nodeName}}</p>
        <p>算法名称：{{nodeData.moduleName}}</p>
        <p v-if="nodeData.nodeState&&nodeData.nodeState!=0&&nodeData.startTime">开始时间：{{nodeData.startTime}}</p>
        <p v-if="nodeData.nodeState&&nodeData.nodeState!=0&&nodeData.endTime">结束时间：{{nodeData.endTime}}</p>
        <p v-if="nodeData.nodeState&&nodeData.nodeState!=0">运行状态：{{iconList[nodeData.nodeState].name}}</p>
    </template>
    <span @mouseover="nodeTips=true" @mouseout="nodeTips=false" @mousedown="moveHandle" class="jsplumb-node" :style="{left: `${nodeData.positionX}px`, top: `${nodeData.positionY}px`}" @contextmenu.stop="handleContextMenu" @click.stop="handleClickNode" :id="nodeData.nodeId">
        <i class="node-icon" :style="{color: colors[nodeData.iconType]}" :class="`iconfont ${nodeData.iconType}`"></i>
        <span>{{nodeData.nodeName}}</span>
        <i :style="`color:${iconList[nodeData.nodeState].color}`" :class="`iconfont ${iconList[nodeData.nodeState].icon}`"></i>
    </span>
</el-tooltip>
</template>

<script>
import {
    mapMutations
} from 'vuex'
import {
    colors
} from '@/js/tool'
export default {
    name: 'JsplumbNode',
    props: {
        value: {
            type: Object
        },
        isCtrl: {
            type: Boolean,
            default: false
        },
        jsplumbInstance: {
            type: Object
        }
    },
    data () {
        return {
            disabled: false,
            colors,
            // 节点状态分别是：未就绪、已就绪、准备中、运行中、运行成功、运行出错
            iconList: [{
                    icon: 'icon-weijiuxu',
                    color: 'rgb(255, 47, 47)',
                    name: '未就绪'
                },
                {
                    icon: 'icon-yijiuxu',
                    color: 'rgb(107, 173, 255)',
                    name: '已就绪'
                },
                {
                    icon: 'icon-zhunbeizhong',
                    color: '#919297',
                    name: '准备中'
                },
                {
                    icon: 'icon-yunhangzhong icon-running',
                    color: '#919297',
                    name: '运行中'
                },
                {
                    icon: 'icon-yunhangchenggong',
                    color: 'rgb(92, 184, 92)',
                    name: '运行成功'
                },
                {
                    icon: 'icon-yunhangchucuo',
                    color: 'rgb(255, 69, 69)',
                    name: '运行出错'
                }
            ],
            nodeTips: false,
            isDrag: false,
            dragStartX: 0,
            dragStartY: 0
        }
    },
    computed: {
        nodeData () {
            return this.$isEmpty(this.value) ? '' : this.value
        }
    },
    methods: {
        ...mapMutations({
            setNodeData: 'common/setNodeData',
            setShowNodeProp: 'common/setShowNodeProp',
            setClickNode: 'common/setClickNode'
        }),
        // 当拖动节点时候隐藏节点提示信息
        moveHandle (e) {
            this.dragStartX = e.clientX
            this.dragStartY = e.clientY
            document.addEventListener('mousemove', this.moveHandler, true)
            document.addEventListener('mouseup', this.upHandler, true)
        },
        moveHandler () {
            this.isDrag = true
            this.nodeTips = false
        },
        upHandler (e) {
            // 鼠标移动距离小于10个像素时认为是点击
            if (Math.abs(e.clientX - this.dragStartX) < 10 && Math.abs(e.clientY - this.dragStartY) < 10) {
                this.isDrag = false
            }
            document.removeEventListener('mousemove', this.moveHandler, true)
            document.removeEventListener('mouseup', this.upHandler, true)
        },
        handleContextMenu ($event) {
            this.$emit('on-node-right-click', {
                e: $event,
                root: this.$root,
                nodeId: this.nodeData.nodeId
            })
        },
        handleClickNode () {
            if (!this.disabled) {
                this.disabled = true
                this.$nextTick(() => {
                    // 如果是拖拽则不触发点击事件
                    if (this.isDrag) {
                        this.isDrag = false
                        return
                    }
                    // 设置节点选中状态，移除节点选中状态(当不在ctrl状态)
                    if (!this.isCtrl) {
                        let nodeList = document.getElementsByClassName('jsplumb-node')
                        for (let i = 0; i < nodeList.length; i++) {
                            nodeList[i].classList.remove('jsplumb-node-selected')
                        }
                    }
                    this.$el.classList.add('jsplumb-node-selected')
                    this.setNodeData(this.nodeData)
                    this.setShowNodeProp(true)
                    this.setClickNode(Math.random())
                    this.$emit('on-node-click', this.nodeData.nodeId)
                })
                setTimeout(() => {
                    this.disabled = false
                }, 2000)
            }
        }
    },
    beforeDestroy () {
        document.removeEventListener('mousemove', this.moveHandler, true)
        document.removeEventListener('mouseup', this.upHandler, true)
    },
    watch: {
        value: {
            handler (newVal) {
                this.$emit('input', newVal)
            },
            deep: true
        }
    }
}
</script>

<style lang="less" scoped>
.icon-running {
    animation: rotating 2s linear infinite;
}
</style>
